<template>
  <div>
    <!-- header -->
    <shop-header>商品列表</shop-header>

    <div class="shop-type-list">
      <!-- 左边导航 -->
      <div class="left-nav">
        <ul>
          <li v-for="(item, key) in typeList" :key="key" :class="{'is-active': item.id === typeID}" @click="clickAction(item.id)">{{ item.name }}</li>
        </ul>
      </div>
      <!-- 右边列表 -->
      <div class="right-list-box">
        <ul v-for="(item, key) in typeList" :key="key" v-if="item.id === typeID">
          <li v-for="(infos, key) in item.products" @click="gotoDetail(infos.id)">
            <img :src="infos.image" />
            <span class="info-name">{{ infos.name }}</span>
            <span class="info-amount">{{ infos.amount }}福豆</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../components/header';
import request from '../utils/request.js';
import {Indicator} from "mint-ui";

export default {
  components: {
    shopHeader: Header,
  },
  data () {
    return {
      typeID: '',
      typeList: [],
    }
  },
  async created() {
    let typeStr = localStorage.getItem("typeStr");
    if(!typeStr){
      Indicator.open();
      const res = await request({}, "/ajax/product/list");
      if(res && res.code == 0){
        this.typeList = res.data;
        localStorage.setItem("typeStr", JSON.stringify(res.data));
      }
      Indicator.close();
    }else{
      this.typeList = JSON.parse(typeStr);
    }
    let id = this.$route.query.id;
    if(id && id != "0"){
      this.typeID = parseInt(id);
    }else{
      this.typeID = this.typeList[0].id;
    }
  },
  methods: {
    clickAction(typeID) {
      this.typeID = typeID;
    },
    gotoDetail(id) {
      this.$router.push({
        path: '/detail',
        query:{id: id}
      });
    },
  }
}
</script>

<style scoped>
ul,li,p {
  margin: 0;
  padding: 0;
}

.shop-type-list {
  width: 100%;
  height: calc(100vh - 51px);
  display: flex;
  border-top: 1px solid #ccc;
  box-sizing: border-box;
}
/*左边导航*/
.left-nav {
  width: 23%;
  height: calc(100vh - 51px);
  overflow-y: auto;
  background-color: #555C66;
  border-right: 1px solid #ccc;
}
.left-nav ul li {
  list-style: none;
  width: 100%;
  padding: 10px 0;
  color: #fff;
  border-bottom: 1px solid #7F848A;
  text-align: center;
  font-size: 14px;
}
.left-nav ul li:last-child {
  border-bottom: 0;
}
.left-nav ul li.is-active {
  background-color: #fff;
  color: #0000FF;
}
/*右边列表*/
.right-list-box {
  flex: 1;
  height: calc(100vh - 51px);
  padding: 10px 5px;
  overflow-y: auto;
  box-sizing: border-box;
}
.right-list-box ul {
  display: flex;
  flex-wrap: wrap;
}
.right-list-box ul li {
  list-style: none;
  width: 50%;
  display: flex;
  flex-direction: column;
  padding: 0 5px;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.right-list-box ul li > img {
  width: 100%;
}
.info-name {
  font-size: 14px;
  padding: 5px 0;
}
.info-amount {
  color: #E2778A;
}
</style>
